@tailwind base;
@tailwind components;
@tailwind utilities;

/* Blog页面自定义工具类 */
@layer utilities {
  /* 内容可见性优化 */
  .content-auto {
    content-visibility: auto;
  }
  
  /* 文本阴影效果 */
  .text-shadow {
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
  
  .text-shadow-enhanced {
    text-shadow: 0 4px 8px rgba(0,0,0,0.25);
  }
  
  /* 卡片悬停效果 */
  .card-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  
  .card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
  
  /* 增强的卡片悬停效果 */
  .card-hover-enhanced {
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                box-shadow 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }
  
  .card-hover-enhanced:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
  
  /* 英雄区域渐变 */
  .hero-gradient {
    background: linear-gradient(135deg, #1a2a6c 0%, #b21f1f 50%, #fdbb2d 100%);
  }
  
  /* 导航滚动效果 */
  .nav-scrolled {
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  }
  
  /* 筛选激活状态 */
  .filter-active {
    background-color: #2563eb;
    color: #ffffff;
  }
  
  /* 评论线条效果 */
  .comment-line {
    position: relative;
  }
  
  .comment-line::before {
    content: '';
    position: absolute;
    left: 19px;
    top: 40px;
    bottom: 0;
    width: 2px;
    background-color: #e5e7eb;
  }
  
  /* 行高限制工具类 */
  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  .line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  .line-clamp-4 {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  /* 搜索高亮样式 */
  .search-highlight {
    @apply bg-yellow-100 text-yellow-800 px-1 rounded;
  }
}

/* Blog页面组件样式 */
@layer components {
  /* 博客卡片基础样式 */
  .blog-card {
    @apply bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300;
  }
  
  .blog-card:hover {
    @apply shadow-lg transform -translate-y-1;
  }
  
  /* 增强的博客卡片样式 */
  .blog-card-enhanced {
    @apply bg-white rounded-xl shadow-md overflow-hidden;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                box-shadow 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }
  
  .blog-card-enhanced:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
  
  /* 博客标签样式 */
  .blog-tag {
    @apply text-xs font-medium px-3 py-1 rounded-full;
  }
  
  .blog-tag-primary {
    @apply bg-blue-100 text-blue-800;
  }
  
  .blog-tag-success {
    @apply bg-green-100 text-green-800;
  }
  
  .blog-tag-purple {
    @apply bg-purple-100 text-purple-800;
  }
  
  /* 博客按钮样式 */
  .blog-btn {
    @apply font-medium py-3 px-6 rounded-lg transition-colors;
  }
  
  .blog-btn-primary {
    @apply bg-blue-600 text-white hover:bg-blue-700;
  }
  
  .blog-btn-secondary {
    @apply bg-white text-blue-600 hover:bg-blue-50;
  }
  
  /* 增强的博客按钮样式 */
  .blog-btn-enhanced {
    @apply font-bold py-3 px-8 rounded-full text-lg shadow-xl transition-all transform hover:-translate-y-1;
  }
  
  .blog-btn-enhanced-primary {
    @apply bg-white text-blue-600 hover:bg-blue-50;
  }
  
  .blog-btn-enhanced-outline {
    @apply bg-transparent border-2 border-white text-white hover:bg-white/10;
  }
  
  /* 博客导航样式 */
  .blog-nav-link {
    @apply text-gray-600 hover:text-blue-600 transition-colors;
  }
  
  .blog-nav-link-active {
    @apply text-blue-600 font-medium;
  }
  
  /* Insight导航样式 */
  .insight-nav-link {
    @apply text-white hover:text-blue-100 font-medium transition-colors relative;
  }
  
  .insight-nav-link-inactive {
    @apply text-white/80 hover:text-white font-medium transition-colors relative;
  }
  
  .insight-nav-underline {
    @apply absolute bottom-0 left-0 w-0 h-0.5 bg-white transition-all duration-300 group-hover:w-full;
  }
  
  /* 分类卡片样式 */
  .category-card {
    @apply bg-white rounded-xl p-6 text-center shadow-md hover:shadow-xl transition-all;
  }
  
  .category-icon {
    @apply w-14 h-14 rounded-full flex items-center justify-center mx-auto mb-4;
  }
  
  .category-icon-blue {
    @apply bg-blue-100 text-blue-600;
  }
  
  .category-icon-green {
    @apply bg-green-100 text-green-600;
  }
  
  .category-icon-purple {
    @apply bg-purple-100 text-purple-600;
  }
  
  .category-icon-yellow {
    @apply bg-yellow-100 text-yellow-600;
  }
  
  .category-icon-red {
    @apply bg-red-100 text-red-600;
  }
  
  .category-icon-indigo {
    @apply bg-indigo-100 text-indigo-600;
  }
  
  /* 统计数据样式 */
  .stats-item {
    @apply text-center;
  }
  
  .stats-number {
    @apply text-4xl font-bold text-white mb-2;
  }
  
  .stats-label {
    @apply text-white/80;
  }
  
  /* 波浪分隔符样式 */
  .wave-separator {
    @apply absolute bottom-0 left-0 right-0;
  }
  
  /* 装饰元素样式 */
  .decoration-circle {
    @apply absolute rounded-full bg-white opacity-10;
  }
  
  .decoration-circle-1 {
    @apply -top-24 -left-24 w-96 h-96;
  }
  
  .decoration-circle-2 {
    @apply top-1/3 -right-32 w-96 h-96;
  }
  
  .decoration-circle-3 {
    @apply -bottom-24 left-1/4 w-96 h-96;
  }
  
  /* 文章列表页面专用组件 */
  
  /* 筛选侧边栏样式 */
  .filter-sidebar {
    @apply bg-white rounded-xl shadow-md p-6 sticky top-28;
  }
  
  .filter-section {
    @apply mb-8;
  }
  
  .filter-section-title {
    @apply font-bold text-gray-700 mb-4 pb-2 border-b border-gray-100;
  }
  
  .filter-list {
    @apply space-y-3;
  }
  
  .filter-item {
    @apply flex items-center justify-between text-gray-600 hover:text-blue-600 transition-colors;
  }
  
  .filter-item-active {
    @apply text-blue-600 hover:text-blue-700;
  }
  
  .filter-count {
    @apply bg-gray-100 text-gray-600 text-xs px-2 py-0.5 rounded-full;
  }
  
  .filter-count-active {
    @apply bg-blue-100 text-blue-800;
  }
  
  /* 筛选按钮样式 */
  .filter-button {
    @apply px-4 py-2 rounded-lg text-sm font-medium transition-colors;
  }
  
  .filter-button-default {
    @apply bg-gray-100 hover:bg-gray-200 text-gray-700;
  }
  
  .filter-button-active {
    @apply bg-blue-600 text-white;
  }
  
  /* 视图切换按钮样式 */
  .view-toggle {
    @apply flex border border-gray-200 rounded-lg overflow-hidden;
  }
  
  .view-toggle-button {
    @apply px-3 py-2 bg-white text-gray-600 hover:bg-gray-50 transition-colors;
  }
  
  .view-toggle-button-active {
    @apply bg-blue-600 text-white;
  }
  
  /* 文章列表容器 */
  .article-list-container {
    @apply lg:w-3/4 xl:w-4/5;
  }
  
  .article-list-header {
    @apply bg-white rounded-xl shadow-md p-4 mb-8;
  }
  
  /* 文章卡片样式 */
  .article-card {
    @apply bg-white rounded-xl shadow-md overflow-hidden card-hover-enhanced;
  }
  
  .article-card-image {
    @apply w-full h-48 object-cover;
  }
  
  .article-card-content {
    @apply p-6;
  }
  
  .article-card-meta {
    @apply flex items-center justify-between mb-3;
  }
  
  .article-card-date {
    @apply text-gray-500 text-sm;
  }
  
  .article-card-views {
    @apply flex items-center text-gray-500 text-sm;
  }
  
  .article-card-title {
    @apply text-xl font-bold mb-3 text-gray-900 hover:text-blue-600 transition-colors;
  }
  
  .article-card-excerpt {
    @apply text-gray-600 mb-4 line-clamp-3;
  }
  
  .article-card-footer {
    @apply flex items-center justify-between pt-3 border-t border-gray-100;
  }
  
  .article-card-author {
    @apply flex items-center;
  }
  
  .article-card-author-avatar {
    @apply w-8 h-8 rounded-full object-cover;
  }
  
  .article-card-author-name {
    @apply ml-2 text-sm text-gray-700;
  }
  
  .article-card-actions {
    @apply flex items-center space-x-4 text-gray-500;
  }
  
  .article-card-action {
    @apply hover:text-red-500 transition-colors;
  }
  
  .article-card-action-comment {
    @apply hover:text-blue-500 transition-colors;
  }
  
  /* 分页样式 */
  .pagination {
    @apply flex justify-center items-center space-x-2 mt-12;
  }
  
  .pagination-item {
    @apply px-4 py-2 rounded-lg text-sm font-medium transition-colors;
  }
  
  .pagination-item-default {
    @apply bg-white text-gray-700 hover:bg-gray-50 border border-gray-200;
  }
  
  .pagination-item-active {
    @apply bg-blue-600 text-white;
  }
  
  .pagination-item-disabled {
    @apply bg-gray-100 text-gray-400 cursor-not-allowed;
  }
  
  /* 返回顶部按钮 */
  .back-to-top {
    @apply fixed bottom-8 right-8 w-12 h-12 bg-blue-600 text-white rounded-full shadow-lg hover:bg-blue-700 transition-all transform hover:scale-110 opacity-0 invisible;
  }
  
  .back-to-top-visible {
    @apply opacity-100 visible;
  }
  
  /* 统计标签样式 */
  .stats-badge {
    @apply bg-white/20 text-white px-4 py-2 rounded-full text-sm;
  }
  
  /* 文章网格布局 */
  .article-grid {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-8;
  }
  
  .article-grid-compact {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-10;
  }
}
